<template>
	<zero-custom-bar :effect="false" color="#fff" title='代驾服务'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)" :singleIcon="true"></zero-custom-bar>

	<view class="box">
		<view class="content">
			<view class="item" style="margin-top: 48rpx;" @click="openStartMap('start')">
				<text class="unit"></text>
				<text class="value slh">出发地：{{location.startPosition}}</text>
			</view>
			<text class="line"></text>
			<view class="item" @click="openStartMap('end')">
				<text class="unit" style="background-color: #2B2B2B;"></text>
				<text class="value slh" style="color: #FE9C24;">目的地：{{location.endPosition}}</text>
			</view>
		</view>
		<view class="bottom" v-if="product">
			<view class="">
				<text>预付</text>
				<text style="color: #F13D3D;font-weight: bold;">{{product.salePrice / 100}}元</text>
			</view>
			<text>（实际金额完成订单后，请与司机核实并支付）</text>
		</view>
	</view>
	<button class="btn" @click="submit">立即下单</button>
</template>

<script setup>
	import {
		wxOpenid,
		debounce,
		sendCreateOrder,
	} from '@/utils/login-sdk.js'
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	import {
		orderPreDriver,
		getProductInfo,
		createOrder,
		getSignupWeixin
	} from '@/api'
	const product = ref()
	onLoad(async (params) => {
		console.log(params)
		const {
			memberId,openId
		} = await wxOpenid()
		getProcyMoney()
		location.value.startPosition = params.start
		location.value.endPosition = params.end
		location.value.productInfoId = params.productInfoId
		location.value.memberId = memberId
		location.value.openId = openId
	})
	const location = ref({
		startPosition: "",
		endPosition: "",
		productInfoId: "",
		memberId: "",
		openId:""
	})
	const getProcyMoney = async()=>{
		const res = await getProductInfo({businessType:6})
		product.value = res.result
	}
	const submit = debounce(async()=>{
		// uni.showLoading({
		// 	mask:true
		// })
		const res = await orderPreDriver(location.value)
		uni.navigateTo({
			url:"/pages/pay/pay?preOrderId="+res.result.preOrderId+'&token='+res.result.token+'&orderAmount='+product.value.salePrice+'&businessType=6'
		})
		// let params = {
		// 	preOrderId:res.result.preOrderId,
		// 	orderAmount:product.value.salePrice,
		// 	payAmount:product.value.salePrice,
		// 	couponIds:"",
		// 	memberId:location.value.memberId,
		// 	activityReduction:0,
		// 	openId:location.value.openId,
		// 	storeId:'',
		// 	businessType:"6"
		// }
		// sendCreateOrder(params,res.result.token)
		
	},2000)
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #F7F4F0 49%, ) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);

		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		background-attachment: fixed
	}

	.box {
		width: 702rpx;
		height: 433rpx;

		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 57rpx auto;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;

		.content {
			width: 638rpx;
			height: 245rpx;
			background: #F6F6F6;
			border-radius: 28rpx;
			margin: 35rpx auto 0;

			.line {
				width: 2rpx;
				height: 62rpx;
				background: #FE9C24;
				margin: 12rpx 0;
				display: block;
				margin-left: 34rpx;
			}

			.item {
				display: flex;
				align-items: center;

				.unit {
					width: 12rpx;
					height: 12rpx;
					background: #FE9C24;
					border-radius: 50%;
					display: block;
					margin-left: 30rpx;
				}

				.value {
					font-weight: bold;
					font-size: 30rpx;
					color: #2B2B2B;
					margin-left: 20rpx;
					width: 500rpx;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			flex-direction: column;
			width: 100%;

			>view {
				margin-right: 42rpx;
				display: flex;
				justify-content: flex-end;
				margin-bottom: 20rpx;

				text {
					font-size: 30rpx;
					color: #2B2B2B;
				}
			}

			>text {
				margin-right: 42rpx;
				font-size: 20rpx;
				color: #979797;
				text-align: right;
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		position: absolute;
		bottom: 120rpx;
		left: 55rpx;
	}
</style>